<template>
  <div class="app-container">
    <vxe-button @click="insertEvent(-1)">在最后行插入</vxe-button>
    <vxe-table
      border
      show-overflow
      keep-source
      height="300"
      ref="tableRef"
      :data="tableData"
      :edit-rules="validRules"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      @keydown="handleKeydown"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="name" title="Name" :edit-render="{ name: 'VxeInput' }"></vxe-column>
      <vxe-column field="role" title="Role" :edit-render="{ name: 'VxeInput' }"></vxe-column>
      <vxe-column field="sex" title="Sex" :edit-render="{ name: 'VxeInput' }"></vxe-column>
      <vxe-column field="age" title="Age" :edit-render="{ name: 'VxeInput' }"></vxe-column>
      <vxe-column field="date" title="Date" :edit-render="{ name: 'VxeInput' }"></vxe-column>
    </vxe-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tableRef = ref()

// 表格数据
const tableData = ref([
  { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, date: '2022-01-01' },
  { id: 10002, name: '', role: 'Test', sex: '1', age: 22, date: '2022-02-02' },
  { id: 10003, name: 'Test3', role: 'PM', sex: '', age: 32, date: '2022-03-03' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: '', age: 23, date: '2022-04-04' },
  { id: 10005, name: '', role: '', sex: '1', age: 30, date: '2022-05-05' }
])

// 校验规则
const validRules = ref({
  role: [{ required: true, message: '必须填写' }]
})

const insertEvent = async row => {
  const $table = tableRef.value
  if ($table) {
    const record = {
      sex: '1',
      date: '2021-01-01'
    }
    const { row: newRow } = await $table.insertAt(record, row)
    await $table.setEditCell(newRow, 'name')
  }
}
// 键盘事件处理
const handleKeydown = async event => {
  const $table = tableRef.value
  if (!$table) return

  const currentEdit = $table.getEditRecord()
  if (!currentEdit) return

  const { rowIndex, columnIndex } = currentEdit
  const columnCount = $table.getColumns().length
  const rowCount = $table.getTableData().fullData.length
  const editableColumns = $table.getColumns().filter(col => col.editRender)
  if (event.$event.key === 'ArrowDown') {
    // 切换到下一行的第一个可编辑列
    const nextRowIndex = rowIndex + 1
    if (nextRowIndex < rowCount) {
      const targetColumn = editableColumns[0] // 第一个可编辑列
      $table.setEditCell($table.getTableData().fullData[nextRowIndex], targetColumn)
    }
  } else if (event.$event.key === 'ArrowUp') {
    // 切换到上一行的第一个可编辑列
    const prevRowIndex = rowIndex - 1
    if (prevRowIndex >= 0) {
      const targetColumn = editableColumns[0] // 第一个可编辑列
      $table.setEditCell($table.getTableData().fullData[prevRowIndex], targetColumn)
    }
  } else if (event.$event.key === 'Tab') {
    // Tab 键逻辑
    event.preventDefault()

    const isLastColumn = columnIndex === columnCount - 1
    const isLastRow = rowIndex === rowCount - 1

    if (isLastColumn) {
      if (isLastRow) {
        // 如果是最后一行最后一列，阻止跳出
        return
      } else {
        // 跳转到下一行的第一个可编辑列
        const targetColumn = editableColumns[0] // 第一个可编辑列
        $table.setEditCell($table.getTableData().fullData[rowIndex + 1], targetColumn)
      }
    } else {
      // 跳转到当前行的下一列
      const nextColumnIndex = columnIndex + 1
      const targetColumn = $table.getColumns()[nextColumnIndex]
      $table.setEditCell($table.getTableData().fullData[rowIndex], targetColumn)
    }
  }
}
</script>
